<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>房间预定</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <script type="text/javascript" src="../../script/aes.js"></script>
	<script type="text/javascript" charset="UTF-8" src="../../script/naes.js"></script>
	<script type="text/javascript" src="../../script/modeecb.js"></script>
    <script type="text/javascript" src="../../script/tmd5.js"></script>
    <script type="text/javascript" src="../../script/constants.js"></script>
    <script type="text/javascript" src="../../resource/jquery214.js"></script>
    <style>
    	body{
    	    margin: 0;	
    	    background:url(../../image/bj.png) repeat-x 0;
    	    background-size: 100%;
    	}
    	.title{
    	    height: 45px;
    	    background: #0483d3;
    	    line-height: 45px;
    	    font-size: 20px;
    	    margin-bottom: 20px;
    	}
    	
    	.input{
	    	float:left;
	    	width: 25%;
	    	height: 30px;
	    	padding: 5px;
	    	font-size: 16px;
	    	border:0;
	    	outline:none;
	    	border-radius: 5px;
    	}
    	.text{
	    	float: left;
	    	height: 30px;
	    	line-height: 30px;
	    	font-size: 18px;
	    	color: #666666;
	    	padding: 5px;
	    	text-align: center;
    	}
    </style>
</head>
<body>
<header id="statusBar">
  <div class="title">
    <div style="float: left;width: 30px;height: 30px;padding: 7.5px;" onclick="api.closeWin();">
    <img src="../../image/hotelManage/back.png"  style="width: 100%;"/>
    </div>
    <div style="float: left;color: #ffffff;">
    房间预订
    </div>
    <div style="float: right;color: #32CD32;margin-right: 20px;" onclick="submit();">
    完成
    </div>
  </div>
  </header>
  <div>
  <input type="text" class="input" style="width: 60%;display: none;" id="room_id" readonly="true" />
   <div style="">
    <div style="width: 30%;" class="text">房间号码：</div>
    <input type="text" class="input" style="width: 60%" placeholder="请选择房间号码" id="room_num" readonly="true" onclick="selectRoom()"/>
   </div>
   <div style="height: 10px;clear: both;"></div>
   
   <div style="">
    <div style="width: 30%;" class="text">预定姓名：</div>
    <input type="text" class="input" style="width: 60%" placeholder="请输入预定姓名" id="name" />
   </div>
   <div style="height: 10px;clear: both;"></div>
   
   <div style="">
    <div style="width: 30%;" class="text">联系电话：</div>
    <input type="number" class="input" style="width: 60%" placeholder="请输入联系电话" id="telephone" onkeyup="value=value.replace(/[^\d]/g,'')"/>
   </div>
   <div style="height: 10px;clear: both;"></div>
   
   <div style="">
    <div style="width: 30%;" class="text">到店时间：</div>
    <input type="date" class="input" style="width: 60%" placeholder="请选择到店时间" id="arrival" />
    <div style="height: 10px;clear: both;"></div>
   </div>
   
   <div style="">
    <div style="width: 30%;" class="text">离店时间：</div>
    <input type="date" class="input" style="width: 60%" placeholder="请选择离店时间" id="live" />
    <div style="height: 10px;clear: both;"></div>
   </div>
  </div>      
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
    var listData = "[";
	apiready = function(){
	
	    if(api.systemType == "ios"){
		   document.getElementById("statusBar").style.background = "#298cb4";
		}
	    $api.fixStatusBar( $api.dom('header') );
	    
	    var room = api.pageParam.room;
	    var id = api.pageParam.id;
	    $("#room_num").val(room);
	    $("#room_id").val(id);
	    var hotelId = $api.getStorage("hotelId");
	    api.showProgress({
		    title: '',
		    text: '努力加载中...',
		    modal: true
		});
		var today = GetDateStr(0);
		var tomorrow = GetDateStr(1);
		//console.log(today+","+tomorrow);
		$("#arrival").val(today);
		$("#live").val(tomorrow);
		var callback = function(ret, err){
	        //console.log(JSON.stringify(ret));
	         api.hideProgress();
	         if(ret.success == true || ret.success == "true"){
               var list = eval("("+ret.room+")");
               for(var i=0;i<list.length;i++){
                  listData += "{uid:'"+list[i].roomid+"',"
                           + "num:'"+list[i].roomnum+"',"
                           + "text:'房间号："+list[i].roomnum+"',"
                           + "status:'normal'},"
               }
                listData = listData.substring(0,listData.length-1)+"]";
             }
	    }
	    var content = {"hotelId":hotelId};
	    apiAjax(JSON.stringify(content),url.queryRoom,callback);     
	};
    
    function GetDateStr(AddDayCount) {
		var dd = new Date();
		dd.setDate(dd.getDate()+AddDayCount);//获取AddDayCount天后的日期
		var y = dd.getFullYear();
		var m = dd.getMonth()+1;//获取当前月份的日期
		var d = dd.getDate();
		return y+"-"+m+"-"+d;
	} 
    
    //提交数据
    function submit(){
       var roomnum = $("#room_num").val();
       var roomid = $("#room_id").val();
       var telephone = $("#telephone").val();
       var name = $("#name").val();
       var arrival = $("#arrival").val();
       var live = $("#live").val();
       var hotelId = $api.getStorage("hotelId");
       if(check(roomnum,name,telephone,arrival,live)){
            var UILoading = api.require('UILoading');
		   	UILoading.flower({
			    center: {
			        x: api.winWidth/2.0,          
			        y: api.winHeight/2.0 
			    },
			    size: 30,
			    mask: "rgba(0,0,0,0.5)",
			    fixed: true
		    }, function(ret) {
			    //alert(JSON.stringify(ret));
			    uiId = ret.id;
		    });
	        var callback = function(ret, err){
		        //console.log(JSON.stringify(ret));
		        UILoading.closeFlower({
				    id: uiId
				});
		        if(ret.success == true || ret.success == "true"){
		           api.alert({msg:"预定成功"});
		           $("#room_num").val("");
                   $("#room_id").val("");
                   $("#telephone").val("");
                   $("#name").val("");
                   api.sendEvent({
					    name: 'bookSuccess'
				   });
		        }else{
		           api.alert({msg:"预定失败，"+ret.msg});
		        }
		    }
		    var content = {"hotelId":hotelId,"roomnum":roomnum,"roomid":roomid,"name":name,"telephone":telephone,"arrival":arrival,"live":live};
		    apiAjax(JSON.stringify(content),url.bookRoom,callback);
	   }
    }
    
    
    //检查提交数据
    function check(roomnum,name,telephone,arrival,live){
        var flag = true;
        if(roomnum == "" || roomnum == null || roomnum == "undefined"){
          api.alert({msg: "请选择预定房间"});
	      flag = false;
        }
        if(name == "" || name == null || name == "undefined"){
          api.alert({msg: "请输入正确的预定人姓名"});
	      flag = false;
        }
        var myreg = /^[1][1,2,3,4,5,6,7,8,9][0-9]{9}$/;
	    if (!myreg.test(telephone)) {
	      api.alert({msg: "请输入11位正确手机号"});
	      $("#telephone").val("");
	      flag = false;
	    }
        if(!isDate(arrival)){
          api.alert({msg: "请选择到达时间"});
	      flag = false;
        }
        if(!isDate(live)){
          api.alert({msg: "请选择离开时间"});
	      flag = false;
        }
        return flag;
    }
    
    //判断日期
    function isDate(dateString){
	  if(dateString.trim()=="")return true;
	  var r=dateString.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/); 
	  if(r==null){
	   return false;
	  }
	  var d=new Date(r[1],r[3]-1,r[4]);  
	  var num = (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
	  if(num==0){
	   alert("请输入格式正确的日期\n\r日期格式：yyyy-mm-dd\n\r例  如：2008-08-08\n\r");
	  }
	  return (num!=0);
    } 
    
    
    //选择房间
    function selectRoom(){
       console.log(listData);
       var UIMultiSelector = api.require('UIMultiSelector');
		 UIMultiSelector.open({
		     rect: {
		         h: 400
		     },
		     text: {
		         title: '选择房间',
		         leftBtn: '取消',
		         rightBtn: '确认',
		         selectAll: 'ALL'
		     },
		     max: 100,
		     singleSelection: false,
		     styles: {
		         bg: '#fff',      
		         mask: 'rgba(0,0,0,0.5)',
		         title: {
		             bg: '#fff',
		             color: '#27a8fa',
		             size: 16,
		             h: 44
		         },
		         leftButton: {
		             bg: '#fff',    
		             w: 80,
		             h: 35,
		             marginT: 5,
		             marginL: 8,
		             color: '#FF6347',
		             size: 14
		         },
		         rightButton: {
		             bg: '#fff',    
		             w: 80,
		             h: 35,
		             marginT: 5,
		             marginR: 8,
		             color: '#32CD32',
		             size: 14
		         },
		         item: {
		             h: 50,
		             bg: '#FAFAFA',
		             bgActive: '#27a8fa',
		             bgHighlight: '#27a8fa',
		             color: '#8d8d8d',
		             active: '#fff',
		             highlight: '#fff',
		             size: 16,
		             lineColor: '#EBEBEB',
		             textAlign: 'center'
		         },
			     icon: {                            //（可选项）JSON 类型；每个选项的状态图标样式，若不传则不显示选中的状态图标
			        w: 0,                         //（可选项）数字类型；图标的高度；默认：20
			        h: 0,                         //（可选项）数字类型；图标的高度；默认：w
			        marginT: 11,                   //（可选项）数字类型；图标的上边距；默认：(item.h - h) / 2
			        marginH: 8,                    //（可选项）数字类型；图标的横向边距，与 align 的对齐方向相关；默认：8
			        bg: '#fff',                    //（可选项）字符串类型；图标未选中时的背景，支持 rgb、rgba、#、img；默认：rgba(0,0,0,0)
			        bgActive: '#fff',              //（可选项）字符串类型；已选中图标的背景，支持 rgb、rgba、#、img；默认：bg
			        bgHighlight: '#fff',           //（可选项）字符串类型；选项的高亮背景，支持 rgb、rgba、#、img；默认：bg
			        align: 'left'                  //（可选项）字符串类型；图标相对与选项的对齐方式：'left|right'；默认：left
			     }
		     },
		     animation: true,
		     items: eval("("+listData+")")
		 }, function(ret, err) {
		     if (ret) {
		         if(ret.eventType == "clickLeft"){
		            UIMultiSelector.hide();
		         }else if(ret.eventType == "clickRight"){
		            var roomnum = "";
		            var roomid = "";
		            for(var i = 0; i < ret.items.length; i++){
		               roomnum += ret.items[i].num+","
		               roomid += ret.items[i].uid+","
		            }
		            roomnum = roomnum.substring(0,roomnum.length-1);
		            roomid = roomid.substring(0,roomid.length-1);
		            $("#room_id").val(roomid);
		            $("#room_num").val(roomnum);
		            UIMultiSelector.hide();
		         }
		     } else {
		         alert(JSON.stringify(err));
		     }
		 });
    }
</script>
</html>